<template>
  <div class="an-box an-page">
    <el-page-header @back="goBack" :content="title"></el-page-header>
    <div class="an-body" v-loading="loading" v-if="formOk">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="预览图">
          <uplaod-img v-model:url="form.image" />
        </el-form-item>
        <el-form-item label="商品分类">
          <el-cascader
            v-model="form.typeId"
            :options="goodsType"
            :props="propsTree"
            :show-all-levels="false"
          ></el-cascader>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="单价">
              <el-input v-model="form.price"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="库存">
              <el-input v-model="form.stock"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运费基数">
              <el-input v-model="form.freightBase"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="主图">
          <uplaod-img v-model:url="form.mainPic" :number="3" />
        </el-form-item>

        <el-form-item label="立即上架">
          <el-switch v-model="form.state" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>

        <el-form-item label="规格">
          <goods-options v-model:options="form.options" />
        </el-form-item>

        <el-form-item label="商品详情">
          <TEditor ref="editor" v-model:value="form.detail" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="loading">提 交</el-button>
          <el-button>取 消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import UplaodImg from "@/components/UplaodImgs/index.vue";
import goodsOptions from "./goodsOptions/index.vue";
import TEditor from "@/components/RichText/TEditor.vue";
import { GoodsType } from "@/utils/interface";
interface GoodsTree extends GoodsType {
  children: Array<GoodsType>;
}
@Options({
  components: { UplaodImg, goodsOptions, TEditor },
  props: {
    // 商品ID
    id: {
      type: String,
      default: "",
    },
  },
})
export default class goodsAdd extends Vue {
  [x: string]: any;
  title: String = "详情页";
  goodsType: Array<GoodsTree> = []; // 商品分类数据 树形结构
  loading: Boolean = false;
  propsTree = {
    value: "id",
    label: "typeName",
  };
  data() {
    return {
      form: {
        name: "",
        image: [],
        typeId: [],
        price: 0,
        stock: 100, // 库存
        state: 1,
        freightBase: 1, // 运费基数
        options: [], // 商品规格参数
        mainPic: [],
        detail: "",
      },
      formOk: false,
    };
  }
  created() {
    this.title = this.$route.meta.title;
    this.getList();
    if (this.id) {
      this.getInfo();
    } else {
      this.formOk = true;
    }
  }

  // 查询商品详情数据
  getInfo() {
    this.loading = true;
    this.API.goodsInfo(this.id).then((res: any) => {
      this.loading = false;
      this.form = res;
      this.form.image = [res.image];
      if (res.mainPic) {
        this.form.mainPic = JSON.parse(res.mainPic);
      }
      if (res.options) {
        this.form.options = JSON.parse(res.options);
      }
      delete this.form.createTime;
      this.formOk = true;
    });
  }

  // 获取分类数据
  getList() {
    this.$store
      .dispatch("appModule/getGoodsType")
      .then((res: Array<GoodsType>) => {
        let arry = JSON.parse(JSON.stringify(res));
        this.goodsType = this.AUTH.createTree([...arry], "id", "parentID");
      });
  }

  // 提交
  onSubmit() {
    let nd = JSON.parse(JSON.stringify(this.form));
    if (this.id) {
      nd.id = this.id;
    }
    nd.image = this.form.image[0];
    nd.typeId = this.form.typeId[this.form.typeId.length - 1];
    nd.options = JSON.stringify(this.form.options);
    nd.mainPic = JSON.stringify(this.form.mainPic);
    this.loading = true;
    this.API.goodsUpdate(nd).then(() => {
      this.loading = false;
      this.$message.success("保存成功！");
      this.$router.push("/goods");
    });
  }
  // 后退
  goBack() {
    this.$router.go(-1);
  }
}
</script>

<style scoped>
.an-body {
  padding: 50px 15px;
  height: calc(100% - 30px);
  overflow: auto;
}
</style>